<template>
  <div id="todos">
    <div class="todos-box">
      <div class="todos-todos">todos</div>
      <div class="todos-text">
        <div
          :class="['todos-text-retAndRel', { retAndRel: allSelectState }]"
          @click="allSelect"
        >
          ^
        </div>
        <!--输入框-->
        <input
          type="text"
          @keyup.enter="getInputVal"
          v-model="inputValue"
          placeholder="What needs to be done?"
        />
      </div>

      <div class="todos-list">
        <div
          class="todos-list-itme"
          v-for="(itme, index) in updataListItmes"
          :key="itme.id"
        >
          <input
            type="checkbox"
            class="todos-list-itme-checkbox"
            v-model="itme.checked"
          />
          <div :class="['todos-list-itme-text',{'text-deco':itme.checked}]" @dblclick="bdlclickInput(index)">
            {{ itme.text }}
          </div>
          <div class="todos-list-input-box">
            <input
              v-model="itme.text"
              type="text"
              :class="[
                'todos-list-itme-input',
                { 'todos-list-itme-input-none': inputVal !== index },
              ]"
              @blur="loseFocus"
              ref="focus"
            />
          </div>
          <div class="todos-list-itme-colse" @click="deleteList(index)">
            <span>×</span>
          </div>
        </div>
      </div>

      <div class="todos-list-bottom">
        <div class="todos-list-bottom-left">
          <span>{{ autoNum }} 个未选</span>
        </div>
        <div class="todos-list-bottom-center">
          <p
            :class="['selectBorder', { changeBorder: listState == 'all' }]"
            @click="handleClickState('all')"
          >
            全部
          </p>
          <p
            :class="['selectBorder', { changeBorder: listState == 'active' }]"
            @click="handleClickState('active')"
          >
            未选中
          </p>
          <p
            :class="[
              'selectBorder',
              { changeBorder: listState == 'completed' },
            ]"
            @click="handleClickState('completed')"
          >
            已选中
          </p>
        </div>
        <div class="todos-list-bottom-rigth" @click="clearCompleted">
          清楚已选项
        </div>
      </div>
      <div class="todos-bottom-mod1"></div>
      <div class="todos-bottom-mod2"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "listItme",
  data() {
    //这里存放数据
    return {
      inputVal: -1,
      listState: "all", //all active completed
      isSelected: false,
      inputValue: "",
      listItmes:JSON.parse(localStorage.getItem("todos")||'[]'),
      // listItmes: [
      //   {
      //     id: 1,
      //     text: "aaaaa",
      //     checked: false,
      //   },
      //   {
      //     id: 2,
      //     text: "bbbbbb",
      //     checked: false,
      //   },
      //   {
      //     id: 3,
      //     text: "ccccc",
      //     checked: false,
      //   },
      //   {
      //     id: 4,
      //     text: "ddddd",
      //     checked: false,
      //   },
      // ],
    };
  },
  watch:{
    listItmes:{
      handler:function(newListItme){
        localStorage.setItem("todos",JSON.stringify(newListItme));
      },
      deep:true
    }
  },
  methods: {
    loseFocus: function () {
      this.inputVal = -1;
    },
    bdlclickInput: function (index) {
      this.inputVal = index;
      setTimeout(() => {
        this.$refs.focus[index].focus();
      }, 0);
    },
    clearCompleted: function () {
      let newListItmes = this.listItmes.filter((v) => {
        return !v.checked;
      });
      this.listItmes = newListItmes;
    },
    handleClickState: function (state) {
      this.listState = state;
    },
    deleteList: function (index) {
      this.listItmes.splice(index, 1);
    },
    getInputVal: function () {
      if (!this.inputValue) {
        this.$message({
          message: "输入不能为空！",
          type: "warning",
        });
        return false;
      }
      let obj = {
        id: Date.now(),
        text: this.inputValue,
        checked: false,
      };
      this.listItmes.push(obj);
      this.inputValue = "";
      
    },
    allSelect: function () {
      let newListItme = JSON.parse(JSON.stringify(this.listItmes));
      if (!this.allSelectState) {
        newListItme.map((itme) => {
          itme.checked = true;
        });
      } else {
        newListItme.map((itme) => {
          itme.checked = false;
        });
      }
      this.listItmes = newListItme;
    },
  },
  computed: {
    updataListItmes: function () {
      if (this.listState === "all") {
        return this.listItmes;
      } else if (this.listState === "active") {
        return this.listItmes.filter((v) => {
          return !v.checked;
        });
      } else if (this.listState === "completed") {
        return this.listItmes.filter((v) => {
          return v.checked;
        });
      }
    },
    autoNum: function () {
      let num = 0;
      this.listItmes.map((v) => {
        if (!v.checked) {
          num++;
        }
      });
      return num;
    },
    allSelectState: function () {
      let checked = true;
      this.listItmes.map((v) => {
        if (!v.checked) {
          checked = false;
        }
      });
      return checked;
    },
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
};
</script>
<style lang="less" scoped>
#todos {
  width: 100%;
  height: 700px;
  background: #f5f5f5;
  .todos-box {
    width: 800px;
    margin: 0 auto;
    .todos-todos {
      color: #ead7d7;
      width: 100%;
      font-size: 90px;
      text-align: center;
      padding: 20px 0;
    }

    .todos-text {
      text-align: center;
      position: relative;
      .todos-text-retAndRel {
        width: 50px;
        height: 50px;
        color: #999;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        position: absolute;
        top: 0px;
        left: 125px;
        user-select: none;
        cursor: pointer;
      }
      .retAndRel {
        color: #333;
        font-weight: bolder;
      }

      input {
        width: 430px;
        height: 50px;
        padding: 0 60px;
        color: #948475;
        font-size: 20px;
        border: 0;
        box-shadow: #c3c3c3 1px 5px 10px;
      }
    }

    .todos-list {
      .todos-list-itme {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 510px;
        margin: 0 auto;
        padding: 10px;
        background: #fff;
        box-shadow: #c3c3c3 -1px -0px 10px;
        input.todos-list-itme-checkbox {
          border: 2px solid #c7dfdb;
          color: #5dc2af;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          font-size: 20px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;
          user-select: none;
        }

        .todos-list-itme-text {
          color: #948475;
          font-size: 24px;
          width: 420px;
          user-select: none;
        }
        .text-deco {
          color: #d9d9d9;
          text-decoration: line-through;
        }

        .todos-list-input-box {
          position: relative;
          .todos-list-itme-input {
            height: 24px;
            width: 420px;
            position: absolute;
            left: -435px;
            top: -12px;
            padding: 0 10px;
          }
          .todos-list-itme-input-none {
            display: none;
          }
        }

        .todos-list-itme-colse {
          font-weight: bolder;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          cursor: pointer;

          span {
            user-select: none;
            color: #4d74b4;
            font-size: 20px;
            display: none;
          }
        }
        &:hover .todos-list-itme-colse span {
          display: inline-block;
        }
      }
    }
    .todos-list-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 530px;
      height: 50px;
      margin: 0 auto;
      padding: 0 10px;
      background: #fff;
      color: #777777;
      border: 1px solid #e6e6e6;
      border: 1px 0;
      user-select: none;
      box-shadow: #c3c3c3 1px -0px 10px;
      .todos-list-bottom-left {
        color: #777777;
      }
      .todos-list-bottom-center {
        display: flex;
        width: 200px;
        justify-content: space-between;

        .selectBorder {
          cursor: pointer;
          height: 20px;
          padding: 5px;
          line-height: 20px;
          border-radius: 5px;
          border: 1px solid #fff;
          &:hover {
            border: 1px solid #efd5d5;
          }
        }
        .changeBorder {
          border: 1px solid #666;
        }
      }
      .todos-list-bottom-rigth {
        cursor: pointer;
        user-select: none;
        // display: inline;
        width: 126px;
        height: 22px;
      }
    }

    .todos-bottom-mod1 {
      width: 540px;
      height: 4px;
      margin: 0 auto;
      background: #f6f6f6;
      box-shadow: #c3c3c3 1px -0px 10px;
      border: #dddddd solid 1px;
    }
    .todos-bottom-mod2 {
      width: 520px;
      height: 4px;
      margin: 0 auto;
      background: #f6f6f6;
      box-shadow: #c3c3c3 1px -0px 10px;
      border: #dddddd solid 1px;
    }
    .todos-bottom-none {
      display: none;
    }
  }
}
</style>